//引入normalize
@import "normalize.scss";
//引入base
@import "base.scss";
body{
  height: 100%;
  background:url('../images/match/loginbg.png') no-repeat;
  //background:url('../images/match/loginbg.png') no-repeat center / 100% 100%;
  background-size:100%;

  //background-size:(1080/54)*1rem 43.555556rem;
}
.answer {
  width: 100%;
  position: relative;
  .di{
    width: (250/54)*1rem;
    height: (205/54)*1rem;
    position: absolute;
    top: (3/54)*1rem;
  }
  .blue_left{
    left: 0;
    background-color: #7382dd;
    border-top-right-radius:(250/54)*1rem;
    border-bottom-right-radius:(250/54)*1rem;
    .head_l{
      width: (172/54)*1rem;
      height: (172/54)*1rem;
      position: absolute;
      @include vc(172);
      background:url('http://127.0.0.1:8080/images/zhujiemian/2.pic.jpg') no-repeat center / 100% 100%;
      border-radius: 50%;
      border: (10/54)*1rem solid white;
      left: (62/54)*1rem;
    }
    .my_name{
      font-size: (41/54)*1rem;
      position: absolute;
      top: ((210)/54)*1rem;
      color: white;
      font-weight: 800;
      left: (91/54)*1rem;
    }
  }
  .red_right{
    background-color: #bc2130;
    border-top-left-radius:(250/54)*1rem;
    border-bottom-left-radius:(250/54)*1rem;
    right: 0;
    .head_r{
      right: (62/54)*1rem;
      width: (172/54)*1rem;
      height: (172/54)*1rem;
      position: absolute;
      @include vc(172);
      background:url('http://127.0.0.1:8080/images/zhujiemian/2.pic.jpg') no-repeat center / 100% 100%;
      border-radius: 50%;
      border: (10/54)*1rem solid white;
    }
    .other_name{
      font-size: (41/54)*1rem;
      position: absolute;
      top: ((210)/54)*1rem;
      color: white;
      font-weight: 800;
      right: (91/54)*1rem;
    }
  }

  .time{
    width: (185/54)*1rem;
    height: (185/54)*1rem;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    top: (44/54)*1rem;
    border-radius: 50%;
    border: (34/54)*1rem solid white;
    //animation-delay: 3.5s;    //动画延迟时间
    .num{
      color: white;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }
  }
  .time_h{
    width: (170/54)*1rem;
    height: (170/54)*1rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: (51/54)*1rem;
    border-radius: 50%;
    border: (20/54)*1rem solid #48a384;
  }
  #circle{
    //width: (185/54)*1rem;
    //height: (185/54)*1rem;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    top: 0.858148148rem;
    //border-radius: 50%;
    //border: (34/54)*1rem solid white;
  }
  .question{
    font-size: (44/54)*1rem;
    position: relative;
    top: (254/54)*1rem;
    text-align: center;
    color: #fff156;
    font-weight: 800;
    //animation:bounceInDown 1s;
    //animate-duration: 2s;    //动画持续时间
    animation-delay: 0.3s;    //动画延迟时间
    //animate-iteration-count: 2;    //动画执行次数
  }
  .type_bg{
    animation-delay: 0.3s;    //动画延迟时间
    width: (407/54)*1rem;
    height: (78/54)*1rem;
    font-size: (44/54)*1rem;
    position: absolute;
    top: (308/54)*1rem;
    @include lc(407);
    color: #fff156;
    background:url('../images/answer/组54.png') no-repeat center / 100% 100%;
    .type{
      font-size: (44/54)*1rem;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      color: #fff156;
      font-weight: 800;
    }
  }
  .timu{
    font-size: (44/54)*1rem;
    position: relative;
    top: p2r(505);
    text-align: center;
    color: white;
    font-weight: 800;
    animation-delay: 3.5s;    //动画延迟时间
  }
  .bgg{
    width: (596/54)*1rem;
    height: (114/54)*1rem;
    position: absolute;
    top: (409/54)*1rem;
  }
  .g_l{
    //background:url('../images/answer/左.png') no-repeat center / 100% 100%;
    //left: 0;
  }
  .g_r{
    background:url('../images/answer/右.png') no-repeat center / 100% 100%;
    right: 0;
    .num{
      font-size: (44/54)*1rem;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: (71/54)*1rem;
      color: #1c7800;
      font-weight: 800;
    }
  }

  .defen_bg{
    width: 100%;
    height: (123/54)*1rem;
    background:url('../images/answer/组55.png') no-repeat center / 100% 100%;
    position: absolute;
    top: (599/54)*1rem;
    animation-delay: 9s;
    .last{
      font-size: (89/54)*1rem;
      position: absolute;
      top: p2r(-114);
      left: 50%;
      transform: translateX(-50%);
      color: white;
      font-weight: 800;
    }
    .double{
      font-size: (42/54)*1rem;
      position: absolute;
      left: p2r(387);
      top: 50%;
      transform: translateY(-50%);
      //border: 1px solid blue;
      color: white;
      font-weight: 800;
    }
  }
  .defen_bg_2{
    animation-delay: 1s;
  }
  .sl{
    width: (52/54)*1rem;
    height: (783/54)*1rem;
    position: absolute;
    top: (813/54)*1rem;
    //background-color: #672c38;
    background-color: #ffda05;
    border: (8/54)*1rem solid #d05278;
    border-radius: (52/54)*1rem;
  }
  .score_l{
    left: (92/54)*1rem;
    animation-delay: 3.5s;    //动画延迟时间
    .score_l_num{
      font-size: (50/54)*1rem;
      color: #ffda00;
      position: absolute;
      top: p2r(-75);
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .score_r{
    right: (92/54)*1rem;
    animation-delay: 3.5s;    //动画延迟时间
    .score_r_num{
      font-size: (50/54)*1rem;
      color: #ffda00;
      position: absolute;
      top: p2r(-75);
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .option{
    width: (625/54)*1rem;
    height: (737/54)*1rem;
    position: absolute;
    //left: 50%;
    top: (795/54)*1rem;
    @include lc(625);
    //transform: translateX(-50%);
    animation-delay: 4s;    //动画延迟时间
    .op{
      width: 100%;
      height: (160/54)*1rem;
      //background-color: #b0d52d;
      background-color: #f7f7f7;
      //background-color: #f56607;
      border-radius: (24/54)*1rem;
      margin-bottom:(35/54)*1rem;
      position: relative;
      .word{
        font-size: (56/54)*1rem;
        position: absolute;
        left: 50%;
        //top:(44/54)*1rem;
        top: 50%;
        transform: translate(-50%,-50%);
        color: #514666;
        font-weight: 800;
      }
      .biaozhi{
        font-size: (60/54)*1rem;
        position: absolute;
        left: (45/54)*1rem;
        //top:(44/54)*1rem;
        top: 50%;
        transform: translateY(-50%);
        color: white;
        font-weight: 800;
      }
    }
    .option1{

    }
    .option2{
      //background-color: #f66608;

      .error{
        font-size: (60/54)*1rem;
        position: absolute;
        left: (45/54)*1rem;
        //top:(44/54)*1rem;
        top: 50%;
        transform: translateY(-50%);
        color: white;
        font-weight: 800;
      }
    }
  }
}
//定义动画

//两个人头动画
@keyframes head1 {
  to{
    left: 0;
  }
}
@keyframes head2 {
  to{
    right: 0;
  }
}
//第几题与题目类型


//答题分数条动画
@keyframes steps {
  to{
    height: 100%;
    border-top-left-radius: (52/54)*1rem;
    border-top-right-radius: (52/54)*1rem ;
  }
}
//直接调整为动画的初始状态
.answer{
  //.blue_left {
  //  left: p2r(-250);
  //}
  //.red_right{
  //  right:p2r(-250);
  //}
  .score_l{
    background-color: #672c38;
    .step{
      bottom:0;
      position: absolute;
      height: 0%;
      width: 100%;
      background-color: #ffda05;
      //border-radius: (52/54)*1rem;
      border-bottom-left-radius: (52/54)*1rem;
      border-bottom-right-radius: (52/54)*1rem ;
    }
  }
  .question{

  }
  //.score_r{
  //  background-color: #672c38;
  //  .step{
  //    bottom:0;
  //    position: absolute;
  //    height: 10%;
  //    width: 100%;
  //    background-color: #ffda05;
  //    //border-radius: (52/54)*1rem;
  //    border-bottom-left-radius: (52/54)*1rem;
  //    border-bottom-right-radius: (52/54)*1rem ;
  //  }
  //}
}
//触发动画
.answer.animate{
  //.blue_left {
  //  animation:head1 0.1s linear forwards;
  //}
  //.red_right{
  //  animation:head2 0.1s linear forwards;
  //}
  .step{
    animation:steps 3s linear forwards;
  }
  //.question{
  //  animation:bounceInDown 1s;
  //}
}